import React, { Component } from 'react';

const LoginButton = () => {
  return (
    <button>登录</button>
  )
}

const LogoutButton = () => {
  return (
    <button>退出</button>
  )
}
// class App extends Component {
//   state = {
//     loginState: true
//   }
//   render() {
//     return (
//       <div>
//         <button onClick={ () => {
//           this.setState({
//             loginState: !this.state.loginState
//           })
//         } }>切换</button>
//         {
//           this.state.loginState ? <LogoutButton /> : <LoginButton />
//         }
//       </div>
//     );
//   }
// }
// class App extends Component {
//   state = {
//     loginState: true
//   }
//   render() {
//     if (this.state.loginState) {
//       return (
//         <div>
//           <button onClick={ () => {
//             this.setState({
//               loginState: !this.state.loginState
//             })
//           } }>切换</button>
//           <LogoutButton />
//         </div>
//       );
//     } else {
//       return (
//         <div>
//           <button onClick={ () => {
//             this.setState({
//               loginState: !this.state.loginState
//             })
//           } }>切换</button>
//           <LoginButton />
//         </div>
//       );
//     }
    
//   }
// }

class App extends Component {
  state = {
    loginState: true
  }
  render() {
    // let val = null
    // if(this.state.loginState) {
    //   val = <LogoutButton />
    // } else {
    //   val = <LoginButton />
    // }
    let val = this.state.loginState ? <LogoutButton /> : <LoginButton />
    return (
      <div>
        <button onClick={ () => {
          this.setState({
            loginState: !this.state.loginState
          })
        } }>切换</button>
        { val }
      </div>
    )
  }
}

export default App;